<template>
  <div>

    <p class="search-options">
      <span>
        <label>流程角色名称:</label>
        <el-input
          v-model.trim="searchVal.name"
          style='width:120px'
        >
        </el-input>
      </span>

      <span>
        <label>公司选择:</label>
        <el-select
          v-model.trim="searchVal.setid"
          style='width:280px'
          @change ='()=>this.searchVal.deptid =""'
          clearable
        >
          <el-option v-for='(k,i) in jituanList' :label='k.descr' :value='k.setid' :key='i'/>
            
        </el-select>
      </span>

      <span>
        <label>部门选择:</label>
        <el-input
         readonly 
         :on-icon-click='()=>this.bumenDialog = true'
         @focus.stop="bumenDialog = true" 
         style='width:220px'
         icon='search' 
         :placeholder='searchVal.setid?"":"请先选择公司"'
         :disabled='!searchVal.setid'
         :title='searchVal.deptid'
         v-model ='searchVal.deptid'/>
      </span>

      <span>
         <a class="btn" @click.stop="handleSarch">
          查询
         </a>
      </span>


    </p>

    <p class='add-wrap'>
      <el-button v-if='id' @click.stop='goBack' style='margin-right:20px'><i class="el-icon-arrow-left el-icon--left"></i>返回上层</el-button>
      <a class="btn" @click.stop="dialogVisible = true">
        <i class="fa fa-plus"></i>新增
        
      </a>
    </p>

    <add-dialog  :commonRoleList='commonRoleList' :jituanList='jituanList' :dialogVisible.sync='dialogVisible'/>
    <bumen-dialog :setid='searchVal.setid' @getBumenData='(data)=>this.searchVal.deptid = data' :bumenDialog.sync='bumenDialog'/>

  </div>
</template>

<script>
import AddDialog from './addDialog'
import BumenDialog from './bumenDialog'
import Bus from './bus'

export default {
  components: {
    AddDialog,
    BumenDialog
  },
  data () {
    return {
      dialogVisible: false,
      bumenDialog: false,
      searchVal: {
        name: '',
        deptid: '',
        setid: '',
      },
      jituanList: [],
      commonRoleList: []
    }
  },
  computed: {
    id () {
      return this.$route.query.id || ''  
      }
  },
  methods: {


    goBack () {
      this.$router.push({ path: '/backStageManager/commonManage' })
    },

    handleSarch () {
      Bus.$emit('refresh', Math.random())
      Bus.$emit('searchVal', this.searchVal)
    },
    getJituanList () {
      this.Axios.Post('/department/getBusinessUnitNoAuth')
        .then((res) => {
          this.jituanList = res.data.datas
        })
    },
    getCommonRoleList () {
      const params = {
        name: '',
      }
      this.Axios.Post('/wfConfAssigneeCommonRole/getCommonRole', params)
        .then((res) => {
          this.commonRoleList = res.data.datas
        })

    }

  },
  mounted () {

    this.getJituanList()
    this.getCommonRoleList()

  }
}
</script>

<style scoped>
.search-options {
  padding-top: 15px;
}

.search-options > span {
  margin-right: 20px;
}

.search-options > span:last-of-type {
  margin-right: 0;
}

.search-options label {
  margin-right: 10px;
}
.add-wrap,
.search-options {
  margin-left: 20px;
}
.btn {
  height: 26px;
  line-height: 26px;
  text-align: center;
  color: #fff;
  display: inline-block;
  background-color: #18a689;
  border-radius: 5px;
  padding: 5px;
  min-width: 60px;
  margin: 20px 0 20px 0;
  cursor: pointer;
}
.btn i {
  margin-right: 2px;
}
</style>